<template>
    <el-card shadow="hover">
        <template #header>
            <el-text type="info">
                使用趋势图
            </el-text>
        </template>
        <div class="wrapper">
            <ul class="wrapper-cube">
                <li class="item" @click="handleToggleChart('visitor')">
                    <i class="item-icon">
                        <el-icon size="3em">
                            <User />
                        </el-icon>
                    </i>
                    <div class="item-content">
                        <div><el-text type="primary">今日访客</el-text></div>
                        <div><el-text type="primary" class="count">{{ visitorNumber.toFixed(0) }}</el-text></div>
                    </div>
                </li>
                <li class="item" @click="handleToggleChart('frequency')">
                    <i class="item-icon">
                        <el-icon size="3em">
                            <Notebook />
                        </el-icon>
                    </i>
                    <div class="item-content">
                        <div><el-text type="primary">操作频次</el-text></div>
                        <div><el-text type="primary" class="count">{{ frequencyNumber.toFixed(0) }}</el-text></div>
                    </div>
                </li>
            </ul>
            <div ref="chartRef" style="width: 100%; height: 400px;" class="chart"></div>
        </div>

    </el-card>
</template>


<script>
export default {
    title: '使用趋势图',
    icon: 'TrendCharts',
    description: '系统使用情况走势图',
};
</script>


<script setup name="usagechart">
import { TransitionPresets, useTransition } from '@vueuse/core'
import { chartRequestTrackingLog } from "@/api/log/requesttrackinglog.js";
const { proxy } = getCurrentInstance();
const chartRef = ref();
const datasets = ref([]);
const date = proxy.parseTime(new Date(), "{y}-{m}-{d}");
const duration = 2000
const visitor = ref(0);
const frequency = ref(0);
const myChart = ref(null);
const option = reactive({
    tooltip: {
        formatter: function (params) {
            return params.name + '<br/>' + '数量' + ': ' + params.value;
        }
    },
    xAxis: {
        type: 'category',
        data: 0// 直接使用 datasets.date 替换原来的硬编码数据
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: 0,  // 直接展开 datasets.frequency 数组，添加到 series 中
            type: 'line'
        },
    ]
})


const visitorNumber = useTransition(visitor, {
    duration,
    transition: TransitionPresets.easeOutExpo,
})

const frequencyNumber = useTransition(frequency, {
    duration,
    transition: TransitionPresets.easeOutExpo,
})

const getDatasets = () => {
    return chartRequestTrackingLog().then(res => {
        datasets.value = res;
        return datasets.value;
    })
}

const initChart = () => {
    const echarts = proxy.$echarts;
    myChart.value = echarts.init(chartRef.value);
    getDatasets().then(data => {
        visitor.value = data.find(item => item.date === date)?.visitor || 0;;
        frequency.value = data.find(item => item.date === date)?.frequency || 0;
        handleToggleChart("visitor")
        myChart.value.setOption(option);
    });
}

const handleToggleChart = (type) => {
    switch (type) {
        case 'visitor':
            option.xAxis.data = datasets.value.map(item => item.date);
            option.series[0].data = datasets.value.map(item => item.visitor);
            break;
        case 'frequency':
            option.xAxis.data = datasets.value.map(item => item.date);
            option.series[0].data = datasets.value.map(item => item.frequency)
            break;
    }
    myChart.value.setOption(option);
}

onMounted(initChart);
</script>

<style lang="scss" scoped>
.wrapper {

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .wrapper-cube {
        display: flex;
        column-gap: 10px;

        .item {
            cursor: pointer;
            padding: 20px;
            height: 100px;
            border: 1px solid var(--el-border-color);
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                box-shadow: var(--el-box-shadow);
            }
        }

        .item-icon {
            width: 3em;
            height: 3em;
        }

        .item-content {
            margin-left: auto;
            text-align: center;

            .count.el-text {
                font-size: 30px;
            }
        }
    }

    .chart {
        cursor: pointer;
        border: 1px solid var(--el-border-color);
        margin-top: 20px;

        &:hover {
            box-shadow: var(--el-box-shadow);
        }
    }
}
</style>